<template>
  <div class="menu">
      <div class="header">
           <!-- 左侧返回 -->
           <div class="is-left">
             <a-icon type="left"  @click="$router.back()" />
           </div>
           <!-- 右侧的输入框 -->
           <div>
             <a-input-search placeholder="搜索" style="width:300px" @click="$router.push({name:'Search'})" />
           </div>
      </div>
      <div class="menu_view">
        <!-- 左侧边菜单栏 -->
        <div class="menu_wrap" ref="menuScroll">
           <ul>
             <li :class="{current: type_i===index||type_id===index}" v-for="(item, index) in type" :key="index" @click="selectMenu(index)">
               {{item.name}}
             </li>
           </ul>
        </div>
        <!-- 右边商品栏 -->
        <div class="wares_wrap" ref="wareScroll">
           <ul>
             <!-- <li v-for="(item, index) in type" :key="index" class="wares-list">
               <div class="wares_title">
                 <h3>{{item.name}}({{getItemProductAll(item)}})</h3>
               </div>
               </li> -->
               <div  class="wares_detail">
                 <ul>
                   <li v-for="(ware, i) in wareslist" :key="i" class="products">
                     <img :src="ware.img" alt="">
                     <div class="ware_info" @click="skip(ware.id)">
                        <span class="ware_name">{{ware.name}}</span>
                        <span class="ware_suggest">{{ware.content}}</span>
                        <span class="ware_price">￥{{ware.price/100}}</span>
                     </div>
                   </li>
                   <li>
                     <div class="fill"></div>
                   </li>
                 </ul>
               </div>
           </ul>
        </div>
      </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import QS from 'qs'
export default {
  data() {
    return {
      type_i:0,//初始商品的类型编号
      type_id:-1,//点击商品的种类
      menuScroll:"",//左侧菜单的滚动对象
      wareScroll:"",//右侧商品的滚动对象  
    }
  },
  computed:{
    // //调用vuex中商品种类数组type
    type(){
      return this.$store.getters.type;
    },
    // //调用vuex中所有的商品集合数组wareslist
    wareslist(){
      return this.$store.getters.wareslist;
    },
  },
  methods: {
    //获取每种商品的数量
    getItemProductAll(item){
      return 20;
    },
    initScroll(){
      this.menuScroll=new BScroll(this.$refs.menuScroll,{
        click:true,
      });
      this.wareScroll=new BScroll(this.$refs.wareScroll,{
        click:true,
        probeType:3,
      });
    },
    //点击商品的种类从而切换商品
    selectMenu(index){
      this.type_id=index;
      this.type_i=-2;
      this.$http.get('/work/box-horse/freshlist.php',  {
         params: {
          type_id: this.type_id
        }, 
    }).then((res)=>{
        console.log(res);
        //将所有的商品集合数组wareslist传到vuex中
        this.$store.dispatch("todowareslist",res.data.data);
      }).catch((err)=>{
        console.log(err);
      });
    },
    //点击商品跳转到商品详情
    skip(id) {
      this.$router.push({ name: "Detail", query: { id: id } });
    },
  },
  mounted() {
    this.$http.post('/work/box-horse/freshtype.php').then(
      res=>{
        console.log(res);
        //将商品种类数组type传到vuex中
        this.$store.dispatch("todotype",res.data.data);
      }).catch(err=>{

      });
    this.$http.get('/work/box-horse/freshlist.php',  {
         params: {
          type_id: this.type_id
        }, 
    }).then((res)=>{
        console.log(res);
        //将所有的商品集合数组wareslist传到vuex中
        this.$store.dispatch("todowareslist",res.data.data);
        this.$nextTick(()=>{
          //Dom更新后初始化滚动
          this.initScroll();
        })
      }).catch((err)=>{
        console.log(err);
      });
  },
}

</script>
<style lang="scss" scoped>
.menu {
  width: 100%;
  height: 100%;
  .header {
    width: 100%;
    height: 4rem;
    background: $module-color;
    padding: $common-padding;
    display: flex;
    align-items: center;
    i {
      margin-right: $common-margin;
    }
  }
  .menu_view {
    display: flex;
    margin-top: $common-margin;
    box-sizing: border-box;
    overflow: hidden;
    height:calc(100% - 4rem);
    .menu_wrap{
      ul {
        li {
          height: 4rem;
          padding: $common-padding;
          display: flex;
          align-items: center;
          min-width: 100px;
        }
      }
    }
    .wares_wrap {
      background: $module-color;
      padding: $common-padding;
      height: 654px;
      overflow: hidden;
      h3 {
        font-size: 20px;
        font-weight: bolder;
      }
      .wares_title {
        padding-left: $common-padding;
      }
      .products {
        display: flex;
        img {
          width: 6rem;
          margin-right: $common-margin;
        }
        .ware_info {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          font-size: 16px;
          .ware_name {
            font-weight: bolder;
            width: 130px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .ware_suggest{
            font-size: 8px;
            width: 130px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            color:	#C0C0C0
          }
        }
      }
    }
  }
}
.fill{
  
}
.current {
  background: $module-color;
}
.combo {
  width: 15rem !important;
  margin: 5px;
}
</style>